<template>
  <div class="numboxlist">
    <div v-for="(numitem, $index) in numvalues" :key="$index" class="numbox">
      <numbox2 :num="numitem.num" :color="color" :hasdot="numitem.hasdot" />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue';
import type { Ref } from 'vue';
import numbox2 from './numbox2.vue';
import { str2Num } from '@/utils';

type INumValueType = {
  num: number;
  hasdot: boolean;
};
const props = defineProps({
  value: {
    type: [Number, String],
    default: 0,
  },
  color: {
    type: String,
    default: '#fff',
  },
})
let numvalues: Ref<INumValueType[]> = ref([]);

let computeValues = () => {
  numvalues.value.length = 0;

  let valueStr = str2Num(props.value || 0).toString();

  numvalues.value.length = 0;
  for (var index = 0; index < valueStr.length; index++) {
    numvalues.value.unshift({
      num: str2Num(valueStr[valueStr.length - index - 1]),
      hasdot: index > 0 && index % 3 === 0,
    });
  }
};

watch(
  () => props.value,
  () => {
    computeValues();
  }
);

computeValues();
</script>
<style lang="scss" scoped>
.numboxlist {
  width: 100%;
  height: 100%;

  .numbox {
    float: left;
  }
}
</style>
